<template>
    <footer>

        <transition mode="out-in">
            <keep-alive>
                <component :is="cams[currentIndex]"></component>
            </keep-alive>
        </transition>

        <div @click="handle(index)" v-for="(item,index) in list" :key="index" :class="{active:currentIndex==index}">{{item.name}}</div>
    </footer>
</template>

<script>
import Banner from './Banner.vue'
import Mine from'./Mine.vue'
import Lists from './Lists.vue'
import Host from './Host.vue'
export default {
    data(){
        return {
            currentIndex:1,
            list:[
                {name:'首页',status:false},{name:'爆爆团',status:false},{name:'订单',status:false},{name:'我的',status:false}
            ],
            cams:[Host,Banner,Lists,Mine]
        }
    },
    methods:{
        handle(index){
            this.currentIndex=index
        }
    }
}
</script>

<style scoped>
    footer {
        width: 100%;
        height: 40px;
        background-color: #ccc;
        display: flex;
        position: fixed;
        bottom: 0;
        z-index: 999;
    }
    div {
        width: 100%;
        text-align: center;
        line-height: 40px;
        font-size: 20px;
        /* border-left: 1px solid #000; */
        box-sizing: border-box;
    }
    .active{
        color: blueviolet;
    }

    .v-enter{ /* 入场动画的初始状态 */
    opacity: 0;
  }
  .v-enter-active{   /* 入场动画执行过程中的状态 */ 
    transition: all 1s;
  }
  .v-enter-to{ /* 入场动画执行结束时的状态 */ 
    opacity: 1;
  }

  .v-leave{ /* 离场动画的初始状态 */
    opacity: 1;
  }
  .v-leave-active{   /* 离场动画执行过程中的状态 */ 
    transition: all 1s;
  }
  .v-leave-to{ /* 离场动画执行结束时的状态 */ 
    opacity: 0;
  }

</style>